<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04</title>
    <style>
        .overflow {
            background-color: pink;
            width: 300px;
            height: 500px;
            overflow: visible;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
        }
        .txt {
            background-color: pink;
            width: 300px;
            height: 500px;
            overflow: scroll;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="txt">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, autem consectetur, deserunt, eaque et ex
        explicabo fugit iure laborum molestias necessitatibus nemo nostrum pariatur repudiandae rerum sapiente sunt
        suscipit tempore.
    </div>
    <div>Distinctio, quaerat sit! Amet asperiores aspernatur assumenda eius ipsum iste iure maxime molestiae nisi,
        obcaecati porro praesentium, quas quasi, quisquam quos repellat sapiente voluptatem? Ab autem blanditiis est
        ipsam reiciendis!
    </div>
    <div>Ab amet eligendi est et facilis incidunt ipsa iure nostrum obcaecati odit praesentium quasi reprehenderit
        totam, ut voluptas! Alias assumenda error fugiat iusto neque obcaecati officia sunt tempora tempore. Qui!
    </div>
    <div>Alias aspernatur beatae cum dicta distinctio dolore dolorum excepturi facilis id impedit, magnam maiores
        molestias mollitia, nemo nisi nobis perferendis quae quia quidem quis reiciendis reprehenderit rerum veniam
        voluptate voluptatem.
    </div>
    <div>Blanditiis esse laborum minima odit possimus quia recusandae reiciendis repudiandae. Consequatur culpa incidunt
        necessitatibus possimus, reprehenderit veniam. Ad assumenda consectetur id illum porro quod saepe suscipit!
        Asperiores, inventore, sapiente? Vero.
    </div>
    <div>Corporis deserunt dicta dignissimos eius eligendi laboriosam numquam quo quos, reprehenderit sunt. Alias amet
        autem corporis cupiditate deleniti distinctio dolore dolores, esse inventore ipsum magni modi odio placeat
        praesentium ullam.
    </div>
    <div>Ab accusamus aperiam atque, dolores dolorum ea eaque eum exercitationem expedita illo illum incidunt itaque
        maiores molestias nulla porro possimus, quam repellendus reprehenderit repudiandae saepe sint soluta ullam.
        Quam, saepe?
    </div>
    <div>Dolorum, et expedita minus perspiciatis quae quas recusandae vitae voluptatibus. Mollitia porro quis tempora!
        Aliquam eveniet fugiat illo illum itaque molestias, mollitia nihil quae quidem quos recusandae repellat vero.
        Sit.
    </div>
    <div>Ad aliquid beatae cupiditate dolorem dolorum ducimus hic libero magni, nulla pariatur rerum unde! Eaque labore
        laboriosam omnis quam quasi sed ullam. Dolor dolore fugiat iste magni minima nemo nihil.
    </div>
    <div>Aliquid dolorum quasi vel velit. Aut consequatur culpa cupiditate dolorem eius iure molestiae, quaerat qui,
        quisquam repellat saepe similique veritatis! Blanditiis expedita minima odit perspiciatis quis quo, recusandae
        voluptatibus. Laborum.
    </div>
</div>

<div class="overflow">
    <img src="img/1.png" alt="">
</div>

</body>
</html>